<template>
  <div>
    <common-head></common-head>
    <div class="container">
      <div v-if='!isLogin()' class="topLogin">
          登录后可以同步电脑和手机购物车中的商品
          <van-button type="danger" @click="forLogin">登陆</van-button>
          </div>
      <van-empty description="购物车空空如也！" v-if="!carts.items.length">
        <van-button round type="danger" class="bottom-button" @click="$router.push('/home')">
          逛一逛
        </van-button>
      </van-empty>
      <!-- 商品卡片 -->
      <van-swipe-cell v-for = '(item,index) in this.carts.items' :key = 'item.id'>
        <div class="item">
          <van-checkbox v-model="item.isChecked" @click="singleChange"></van-checkbox>
          <van-card
            :price="item.minPrice.toFixed(2)"
            :desc="item.characteristic"
            :title="item.name"
            class="goods-card"
            :thumb="item.pic"
          >
          <template #footer>
            <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @change="numChange" />
          </template>
          </van-card>
        </div>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(index)" />
        </template>
      </van-swipe-cell>
      <!-- /商品卡片 -->
      <!-- 提交订单 -->
      <van-submit-bar :price="carts.totalPrice*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="carts.isAllchecked" @click="allCheckedState">全选</van-checkbox>
      </van-submit-bar>
      <!-- /提交订单 -->
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { mapState, mapMutations, mapActions } from 'vuex'
import { isLogin } from '@utils'
export default {
  data () {
    return {
      checked: true
    }
  },
  mounted () {
    this.calc_total()
  },
  methods: {
    // 顶部登陆按钮
    forLogin () {
      this.$router.push('/login')
    },
    isLogin,
    // 单选改变全选
    singleChange () {
      // 将改变选中状态的数据传过去
      this.toChange(this.carts)
      this.calc_total()
      const items = this.carts.items
      const allchecked = items.every(el => el.isChecked)
      this.setSingleState(allchecked)
    },
    // 删除商品
    del (index) {
      this.$dialog.confirm({
        title: '删除商品',
        message: '确认要删除该商品吗？'
      })
        .then(() => {
          // on confirm
          this.delItem(index)
          this.calc_total()
        })
    },
    // 商品数量改变
    numChange () {
      // 将改变数量的数据传过去
      this.toChange(this.carts)
      this.calc_total()
    },
    // 全选控制单选
    allCheckedState () {
      this.setAllCheckedState(this.carts.isAllchecked)
      this.calc_total()
    },
    onSubmit () {
      /*
        生成订单联系人
        1，去联系人列表中查找
        2，如果联系人列表为空 则联系人为空
        3，找默认联系人
        4，如果没有默认联系人 选择第一个
        */
      // 判断是否已登陆
      if (this.isLogin()) {
        // 生成订单数据
        const checkedItems = this.carts.items.filter(el => el.isChecked)
        if (checkedItems.length === 0) {
          this.$toast('你还未选中任何商品哦')
        } else {
          // 判断是否存在联系人
          let contact = {}
          if (this.contacts.length > 0) {
          // 说明有联系人地址列表
          // 判断联系人列表是否有默认联系人
            const defaultConcact = this.contacts.find(el => el.isDefault)
            // 如果有，就设置这条
            if (defaultConcact) {
              contact = defaultConcact
            } else {
            // 如果没有，就默认设置为第一条
              contact = this.contacts[0]
            }
          }
          const nowOrder = {
            code: Date.now(),
            items: checkedItems,
            address: contact, // 地址联系人
            nonPayment: this.carts.totalPrice // 待支付金额
          }
          this.setOrder(nowOrder)
          // console.log(nowOrder)
          this.$router.push('/order')
        }
      } else {
        this.$toast('你还没有登陆')
        this.$router.push({
          name: 'login',
          params: {
            from: '/cart'
          }
        })
      }
    },
    ...mapMutations('cart', ['setAllCheckedState', 'delItem', 'toChange', 'setSingleState']),
    ...mapActions('cart', ['calc_total']),
    ...mapMutations('order', ['setOrder'])
  },
  computed: {
    ...mapState({
      carts: (state) => state.cart.carts,
      contacts: (state) => state.address.contacts
    })
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.item{
  display: flex;
  .van-checkbox{
    padding-right: 5px;
    height: 125px;
    padding-left: 15px;
    background: #ffffff;
  }
  .van-card{
    flex: 1;
    /*
    第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
    第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
    */
    margin-bottom: 10px;
    margin-top: 0;
  }
}
.van-submit-bar{
  position: fixed;
  bottom: 50px;
  width: 100%;
  left: 0;
}
.wrap{
  padding-top: 60px;
  background-color: #eee;
}
.delete-button {
    height: 100%;
}
/deep/ .van-card__title{
  font-size: 14px;
  margin-bottom: 5px;
}
.van-ellipsis{
  width: 200px;
  text-overflow: ellipsis;
}
.van-empty{
  height: 500px;
}
.bottom-button {
    width: 160px;
    height: 40px;
}
.topLogin{
  padding-left: 50px;
  color: #333;
  height: 40px;
  line-height: 40px;
  // font-size: 14px;
  background-color: #eee;
  .van-button{
    margin-left: 5px;
    height: 20px;
  }
}
</style>
